<template>
	<!-- <div class="equipmentEditor">
		
		<div class="pageContent">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">装备分类列表</div>
			</div>
		</div>
	</div> -->
	<div>
		<div class="breadcrumb">
			<el-button type="text" size=" " icon="el-icon-arrow-left" @click="$router.back()">返回上一页</el-button>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle">
				<div class="tableTitle">基地基本信息</div>
			</div>
			<div class="tableBoxTable flex" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="pageData" label-width="90px" size="mini">
						<el-form-item label="基地名称：">
							<el-input v-model="pageData.base" disabled placeholder="基地名称" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="基地位置：">
							<el-input v-model="pageData.baseLocation" disabled placeholder="基地位置" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="电子围栏：">
							<el-input v-model="pageData.equipmentName" disabled placeholder="电子围栏" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="负责人：">
							<el-input v-model="pageData.name" disabled placeholder="负责人" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="联系电话：">
							<el-input v-model="pageData.phone" disabled placeholder="联系电话" class="formWidth"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="menberConTitle">
				<div class="tableTitle">开始和结束时间</div>
			</div>
			<div class="tableBoxTable" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="pageData" label-width="90px" size="mini">
						<el-form-item label="任务时间：">
							<!-- <el-input v-model="sizeForm.equipmentName" disabled placeholder="请输入队伍名称" class="formWidth"></el-input> -->
							<el-date-picker v-model="pageDataTime"  class="formWidth" type="daterange" range-separator="-" disabled
							 start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="menberConTitle">
				<div class="tableTitle">工作内容</div>
			</div>
			<div class="tableBoxTable" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="pageData" label-width="90px" size="mini">
						<el-form-item label="管理内容：">
							<el-input v-model="pageData.content" disabled placeholder="请输入队伍名称" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="备注：">
							<el-input v-model="pageData.remark" type="textarea" resize="none" disabled placeholder="请输入队伍名称" class="formWidth"></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="menberConTitle">
				<div class="tableTitle">服务队伍基本信息</div>
			</div>
			<div class="tableBoxTable flex" style="margin-bottom: 50px;justify-content: space-between;">
				<div>
					<el-form ref="form" :model="sericeData" label-width="90px" size="mini">
						<el-form-item label="服务队伍：">
							<el-select v-model="sericeData.teamId" class="formWidth" placeholder="请选择服务队伍" @change="selectSericeTeam">
								<el-option v-for="item in sericeTeam.items" :key="item.id" :label="item.serviceName" :value="item.id"></el-option>
								<!-- <el-option label="区域二" value="beijing"></el-option> -->
							</el-select>
						</el-form-item>
						<el-form-item label="队伍名称：">
							<el-input v-model="sericeData.teamName" disabled placeholder="队伍名称" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="队伍主管：">
							<el-input v-model="sericeData.teamMenber" disabled placeholder="队伍主管" class="formWidth"></el-input>
						</el-form-item>
						<el-form-item label="联系电话：">
							<el-input v-model="sericeData.menberPhone" disabled placeholder="联系电话" class="formWidth"></el-input>
						</el-form-item>
					</el-form>
				</div>

				<!-- <equipmentType></equipmentType> -->
			</div>
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">队伍装备配置</div>
				<el-button type="primary" round @click="dialogVisible = true">选择装备</el-button>
			</div>
			<div class="tableBoxTable">
				<div class="selectEquipList">
					<ul class="selectEquipListUl">
						<li class="selectEquipListLi" v-for="(item, index) in dialogSelectTableList" :key="item.id">
							<el-image class="selectEquipListImg" :src="item.equipmentPhotos"
							 fit="cover"></el-image>
							<div class="selectEquipListDiv">
								<div class="selectEquipListTitle">{{item.equipmentName}}</div>
								<div class="selectEquipListTag">
									<span>{{item.equipmentBrand}}</span>
									<span>{{item.equipmentModel}}</span>
								</div>
								<i class="el-icon-error selectEquipIcon" title="移除" @click="deleteIsSelectEquipment(item.id, index)"></i>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="submitBtns">
			<el-button type="primary" size=" " round="" @click="accomplish">确认任务</el-button>
		</div>
		<!-- 选择装备 -->
		<el-dialog title="选择装备" :visible.sync="dialogVisible" width="800px">
		  <div>
			  <el-form ref="form" :model="dialogSelectData" label-width="90px" size="mini">
			  	<el-form-item label="装备分类：">
			  		<el-select v-model="dialogSelectData.id" class="formWidth" placeholder="请选择装备分类" @change="dialogSelectDatas">
			  			<el-option v-for="item in dialogData.items" :key="item.id" :label="item.equipmentTypeName" :value="item.equipmentRelationId"></el-option>
			  		</el-select>
			  	</el-form-item>
			  </el-form> 
			  <el-table :data="dialogTableData.items" ref="equipmentTable" style="width: 100%" @selection-change="handleSelectionChange" @select="selectSelection">
				  <el-table-column type="selection" width="55"> </el-table-column>
			  	<el-table-column label="装备名称" prop="equipmentName"></el-table-column>
			  	<el-table-column label="品牌" prop="equipmentBrand"></el-table-column>
			  	<el-table-column label="装备型号" prop="equipmentModel"></el-table-column>
			  </el-table>
			  <pagina-tion :totalNum="dialogTableData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="confirmAddEquipment">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				companyId: '',
				pageData: {},
				// 弹窗
				pageDataTime: [],
				// 服务队列表
				sericeTeam: '',
				// 服务队下拉框数据
				sericeData: {
					teamId: '',
					teamName: '',
					teamMenber: '',
					menberPhone: ''
				},
				// 选择装备弹窗
				dialogVisible: false,
				dialogData: '' ,// 弹窗装备分类数据
				dialogSelectData: {
					id: ''
				},
				// 根据装备分类ID获取装备列表
				queryData: {
					equipmentRelationId: '',
					companyId: '',
					isUse: '1',
					page: 1,
					pageSize: $globalData.pageSize
				},
				dialogTableData: '' ,// 弹窗表格数据
				// 已选择的表格数据
				dialogSelectTableData: new Map(),
				// 用于页面显示的数据
				dialogSelectTableList: []
			}
		},
		mounted() {
			// key: "110000/110100/110101/110101001", text: "北京市/北京市/东城区/东华门街道"
			// console.log(this.$route.params.id)
			this.companyId = this.$store.state.company.companyId
			// // console.log(this.$route.params.id)
			// if (this.$route.params.id) {
			// 	this.$refs.serviceConfig.serviceTeamId = this.$route.params.id
			// 	// this.$refs.serviceConfig.getPageData()
			// }
			this.getPageData()
			this.getSericeTeam()
		},
		watch: {
			dialogVisible(newData) {
				if (newData) {
					this.getDialogData()
				} else {
					this.dialogSelectData.id = ''
					this.dialogTableData = ''
				}
			}
		},
		methods: {
			selectSericeTeam(){
				// 选择服务队伍
				let id = this.sericeData.teamId
				this.sericeTeam.items.filter(item=>{
					if(item.id === id){
						this.sericeData.teamName = item.serviceName
						this.sericeData.teamMenber = item.directorName
						this.sericeData.menberPhone = item.directorPhone
					}
				})
			},
			dialogSelectDatas(){
				// 选择装备分类
				let id = this.dialogSelectData.id
				this.dialogData.items.filter(item=>{
					if(item.equipmentRelationId === id){
						this.queryData.equipmentRelationId = item.equipmentRelationId
						this.queryData.companyId = this.companyId
						this.queryData.page = 1
						this.getEquipList()
					}
				})
			},
			getPageData() {
				// 任务ID获取详情
				this.$request.postForm(this.$api.getTaskDetails, {
					taskId: this.$route.params.id
				}).then(res => {
					if (res.code == 200) {
						let data = res.data
						this.pageData = data
						setTimeout(()=>{
							this.pageDataTime.push(data.startDate)
							this.pageDataTime.push(data.endDate)
							// this.pageDataTime[1] = data.endDate
						},300)
						
						console.log(this.pageDataTime)
					}
				})
			},
			getSericeTeam(){
				// 获取服务队列表
				this.$request.get(this.$api.queryServiceTeamList, {
					companyId: this.companyId,
					page: 1,
					pageSize: 20000
				}).then(res => {
					if (res.code == 200) {
						this.sericeTeam = res.data
					}
				})
			},
			getDialogData(){
				// 获取装备分类列表
				this.$request.postForm(this.$api.getCompanyEquipmentType, {
					companyId: this.companyId,
					page: 1,
					pageSize: 20000
				}).then(res => {
					if (res.code == 200) {
						this.dialogData = res.data
					}
				})
			},
			getEquipList(){
				// 根据装备分类ID获取装备列表
				this.$request.postForm(this.$api.queryEquipmentByType, this.queryData).then(res=>{
					if(res.code == 200){
						this.dialogTableData = res.data
						setTimeout(()=>{
							this.dialogTableData.items.forEach((v, i)=>{
								if(this.dialogSelectTableData.has(v.id)){
									this.$refs.equipmentTable.toggleRowSelection(v)
								}
							})
						},100)
						
					}
				})
			},
			paginaClick(val){
				this.queryData.page = val
				this.getEquipList()
			},
			accomplish(){
				// 确定分配任务到服务队
				if(!this.sericeData.teamId){
					this.$message.error('请选择要分配的服务队')
					return
				}
				// 要提交的数据
				let data = {
					serviceId: this.$route.params.id,
					teamId: this.sericeData.teamId,
					equipmentIds: []
				}
				this.dialogSelectTableData.forEach((value, key) => {
					data.equipmentIds.push(key)
				})
				this.$nextTick(()=>{
					this.$request.postForm(this.$api.newTaskToTeam, data).then(res=>{
						if(res.code == 200){
							this.$message.success('操作成功')
							setTimeout(()=>{
								this.$router.back()
							},300)
						}
					})
				})
			},
			handleSelectionChange(rowList){
				// 表格选择操作
				rowList.forEach((v)=>{
					this.dialogSelectTableData.set(v.id, v)
				})
			},
			selectSelection(selection, row){
				// 表格单选操作
				if (this.dialogSelectTableData.has(row.id)){
					this.dialogSelectTableData.delete(row.id)
				} else {
					this.dialogSelectTableData.set(row.id, row)
				}
			},
			confirmAddEquipment(){
				// 确定添加所选装备操作
				this.dialogSelectTableData.forEach((value, key) => {
					this.dialogSelectTableList.push(value)
				})
				this.dialogVisible = false
			},
			deleteIsSelectEquipment(id, index){
				// 删除装备
				this.dialogSelectTableList.splice(index, 1)
				this.dialogSelectTableData.delete(id)
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb {
		padding: 10px 20px;
	}

	.tableNavBox {
		padding: 0 20px;
		padding-bottom: 40px;
		border-bottom: 1px solid #DCDCDC;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		/* margin-top: 20px; */
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.formWidth {
		width: 450px;
	}

	.pageContent {
		height: 40px;
		line-height: 40px;
	}

	.pageContent>>>.isdelete {
		color: #F42929;
	}

	.submitBtns {
		text-align: center;
		padding: 40px 0;
	}

	.submitBtns button {
		width: 150px;
	}

	.tableBoxTable>>>.el-upload {
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		margin-right: 40px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}

	.avatar {
		width: 150px;
		height: 150px;
		display: block;
		border: 1px dashed #d9d9d9;
	}

	.selectEquipList {
		width: 100%;
		padding: 20px;
		padding-bottom: 0;
	}

	.selectEquipListUl {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.selectEquipListLi {
		width: 420px;
		height: 185px;
		border: 1px dotted #DCDCDC;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
		margin-bottom: 20px;
		position: relative;
	}

	.selectEquipListImg {
		width: 160px;
		height: 160px;
		margin-right: 30px;
	}

	.selectEquipListDiv {
		width: 190px;
	}

	.selectEquipListTitle {
		font-size: 16px;
		color: #333333;
		line-height: 30px;
	}

	.selectEquipListTag {
		font-size: 14px;
		color: #333333;
		line-height: 30px;
	}

	.selectEquipListTag span {
		margin-right: 15px;
	}

	.selectEquipIcon {
		position: absolute;
		color: #EC2C2C;
		z-index: 5;
		top: -7px;
		right: -7px;
		cursor: pointer;
	}
</style>
